<template>
    <div class="Tab-Text">
        <el-tabs v-model="activeName" v-if="slotList.length > 0">
            <!-- <el-tab-pane label="歌手信息" name="first" :key="'first_'" v-if="showTabs[0]">
                <div>
                    <slot name="singerinfo" />
                </div>
            </el-tab-pane>

            <el-tab-pane label="歌曲信息" name="second" :key="'second_'" v-if="showTabs[1]">
                <div>
                    <slot name="songinfo" />
                </div>
            </el-tab-pane>

            <el-tab-pane label="专辑信息" name="third" :key="'third_'" v-if="showTabs[2]">
                <div>
                    <slot name="albuminfo" />
                </div>
            </el-tab-pane> -->

            <!-- 简写 -->
            <el-tab-pane v-for="(item, index) in slotList" :key="index" :label="item.label" :name="item.name" v-if="item.show">
                <div>
                    <slot :name="item.slotName" />
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 注释　　　　　　　label：选项卡显示的title　　　　　　　name：与选项卡绑定的activeName对应的标识符，表示选项卡的别名　　　　　-->
    </div>
</template>
<script>
export default {
    props: {
        // showTabs: {
        //     type: Array,
        //     default: function() {
        //         return [true, true, true];
        //     }
        // },

        // 默认激活第一个
        active: {
            type: String,
            default: 'first'
        },
        slotList: {
            type: Array,
            default: function() {
                // return [
                //     {
                //         label: '歌手信息',
                //         name: 'first',
                //         slotName: 'singerinfo',
                //         show: true
                //     },
                //     {
                //         label: '歌曲信息',
                //         name: 'second',
                //         slotName: 'songinfo',
                //         show: true
                //     },
                //     {
                //         label: '专辑信息',
                //         name: 'third',
                //         slotName: 'albuminfo',
                //         show: true
                //     }
                // ];

                return [];
            }
        }
    },
    name: 'TabText',
    data() {
        return {
            //默认第一个选项卡
            // activeName: 'first'
            activeName: this.active
        };
    }
};
// activeName：默认显示那个tab。//activeName：el-tabs组件双向绑定的值，activeName值的取值是要对应el-tab-pane标记的name值
</script>

<style lang="scss" scoped>
.Tab-Text {
    background: #fff;
}
</style>
